<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>针对练习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/plug-in.min.js"></script>
    <style>
        html, body {
            overflow: hidden;
            background: #14191C;
            margin: 0;
        }
        .glyphicon-user {
            position: absolute;
            top:45px;
            left: 20px; }

        .glyphicon-lock {
            position: absolute;
            top: 117px;
            left: 20px; }
        .all {
            position: absolute;
            z-index: 999;
        }

        .listExam {
            margin-top: 190px;
            border: solid 1px #3d3d3d;
            border-radius: 6%;
            margin-left: 40px;
            font-size: 18px;
        }

        .list-group-item-heading {
            list-style: none;
            color: whitesmoke;
            margin-left: 40px;
            margin-top: 20px;
        }

        .listExam {
            color: #d1f5de;
        }

        .canvas {
            position: absolute;
            z-index: 666;
            right: -20px;
        }

        .navbar-inverse input[type="text"] {
            background: #313131;
            border: none;
            color: #999;
        }

        .navbar-inverse .navbar-form {
            position: relative;
        }

        .navbar-form button[type="submit"] {
            background: #313131;
            border: none;
            color: #999;
            position: absolute;
            top: 28%;
            right: 8%;
        }

        @media (min-width: 768px) {
            .navbar-form button[type="submit"] {
                top: 15%;
            }
        }

        .img img {
            width: 200px;
            height: 160px;
        }

        .t1{
            background: #fff;
            border-radius: 6%;
            border: #979797;
            z-index: 999;
            margin: 0 auto;
            margin-top: 60px;
        }
        .dropdown-menu{
            margin: 0;
            padding: 0;
            border: 1px solid #000;
            background: #2f2f2f;
            min-width: 100px;
            height: 55px;
        }
        .dropdown-menu>li{
            width: 100px;
            border-radius: 4px;
        }
        .dropdown-menu>li a{
            color: #9a9a98;
            width: 100px;
            border-radius: 4px;
        }
        .dropdown-menu>li a:hover{
            background: #000000;
            color: white;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<!--导航-->
<nav class="navbar navbar-inverse navbar-fixed-top navtop">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse"
                    data-target="#response-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="backHome" class="">
                <!--<strong>BY一考通</strong>-->
                <img src="images/LOGO_03.png" alt="LOGO" width="100px" style="display: block;line-height:90px;">
            </a>
        </div>
        <div class="collapse navbar-collapse" id="response-collapse">
            <ul class="nav navbar-nav ulDaoHang" id="nav">
                <li class="itemdisplay" style="display: none"><a href="toaddItem">添加试题</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="mockExam">模拟考试
                        <span class="caret">
                                </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="mockExam">科目一</a></li>
                        <li><a href="mockExam4">科目四</a></li>
                    </ul>
                </li>
                <li><a href="practice">随机练习</a></li>
                <li><a href="practice2">顺序练习</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="">针对练习
                        <span class="caret">
                                </span>
                    </a>
                    <ul class="dropdown-menu" role="menu" style="height:105px; ">
                        <li><a href="toForPractice?role=3">图片题</a></li>
                        <li><a href="toForPractice?role=2">文字题</a></li>
                        <li><a href="toForPractice?role=1">选择题</a></li>
                        <li><a href="toForPractice?role=0">判断题</a></li>
                    </ul>
                </li>
            </ul>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li class="nowuser" style="display: none;"><a href="#" id="loginOut">退出当前用户:</a></li>
                    <li><a href="displayUser" class="usernamedisplay"></a></li>
                    <li class="displaylogin"><a href="#" data-toggle="modal"
                                                data-target="#login-modal">登录</a></li>
                    <li class="displaylogin"><a href="#" data-toggle="modal"
                                                data-target="#register-modal">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<!--试题-->
<div class="container all row">
    <div class="col-md-8 col-sm-12 col-xs-12  examleft">
        <div class="listExam">
            <p></p>
            &nbsp;<b style="color: #f4fbea">针对练习</b>
            <ul class="list-group list">
                <li class="list-group-item-heading"><span class="itemNo">(题号)</span>
                    <span class="itemComment">这里是试题内容</span></li>
                <li class="list-group-item-heading examItem" id="examItem">
                    <p class="itemA"></p>
                    <p class="itemB"></p>
                    <p class="itemC"></p>
                    <p class="itemD"></p> <span class="img">图片</span>
                </li>
            </ul>
        </div>
    </div>
    <canvas class="canvas" id="canvas" style="display:block; margin:50px auto;">当前浏览器不支持canvascanvas</canvas>
    <!--<button class="btn btn-success">按钮</button>-->
</div>
<!--弹出框-->
<div class="t1 col-md-3 col-xs-8" style="margin-left: 60px;">
    <div class="modal-header text-success" style="font-size: 12px;">
        提示消息
    </div>
    <div class="tishi modal-body text-info">
        暂未练习，请练习......
    </div>
</div>
<!--登录-->
<div class="modal fade login-modal" id="login-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>
                    <b>用户登录</b>
                </h4>
            </div>
            <div class="modal-body">
                <div>
                    <!--<form method="post">-->
                    <div class="form-group">
                        <label for="username">Username <span
                                class="glyphicon glyphicon-user"></span> <input type="text"
                                                                                name="username" class="form-control"
                                                                                id="username"
                                                                                placeholder="输入用户名"
                                                                                style="padding-left: 22px"></label>
                    </div>
                    <div class="form-group">
                        <label for="password">Password <span
                                class="glyphicon glyphicon-lock"></span> <input type="password"
                                                                                name="password" class="form-control"
                                                                                id="password"
                                                                                placeholder="输入密码"
                                                                                style="padding-left: 22px"></label>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-group-xs" id="userLogin" style="color: white;background: #000;" value="登录">
                        <!--<button onclick="loginUser()" class="btn btn-group-xs">login</button>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--注册-->
<div class="modal fade login-modal" id="register-modal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4>
                    <b>用户注册</b>
                </h4>
            </div>
            <div class="modal-body">
                <div id="form2">
                    <div class="form-group">
                        <label for="username">Username<span
                                class="glyphicon glyphicon-user"></span> <input type="text"
                                                                                name="username" class="form-control"
                                                                                id="rusername"
                                                                                placeholder="输入用户名"
                                                                                style="padding-left: 22px"></label>
                        <br><i id="iusername" style="position: absolute;top:70px;"></i>
                    </div>
                    <div class="form-group">
                        <label for="password">Password <span
                                class="glyphicon glyphicon-lock"></span>
                            <input type="password"
                                   name="password" class="form-control"
                                   id="rpassword"
                                   placeholder="输入密码"
                                   style="padding-left: 22px"></label>
                    </div>
                    <div class="form-group">
                        <label for="remail">Email
                            <span style="position: absolute;top: 192px;left: 20px;" class="glyphicon glyphicon-envelope"></span>
                            <input type="email"
                                   name="email" class="form-control"
                                   id="remail"
                                   placeholder="输入邮箱"
                                   style="padding-left: 22px">
                        </label>
                        <p></p>
                        <input type="hidden" id="yanzhengma-hidden">
                        <input class="btn-sm"  placeholder="输入验证码" style="border: silver;height: 35px;" type="text" id="YanZhengMa">
                        <input type="button" value="获取验证码" class="btn btn-sm" id="GetYanZhengMa"/>
                    </div>
                    <div class="modal-footer" style="text-align: center">
                        <button type="submit" class="btn btn-group-sm" style="color: white;background: #000; width: 150px;" id="userRegister">注册
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/beijing.js"></script>
<script>
    $(function () {
        var storage = window.localStorage;

        //点击题目
        function examItem() {
            $('#examItem').on('change', 'input', function () {

                answer = getItem();
                if (answer == $(this).val()) {
                    $(".tishi").html("第" + itemID + "题回答正确");
                } else {
                    $(".tishi").html("第" + itemID + "题回答错误,正确答案:" + answer);
                    addWrongItem();
                }

            })
        }

        examItem();
        var pageStart = 0; //题目号
        var pageNum = 0; //重第0行开始查询
        var answer = ""; //答案
        var itemID = 0; //题目id
        var type = 0; //题目类型
        var coments = "";//试题内容
        var itemA = "";
        var itemB = "";
        var itemC = "";
        var itemD = "";
        var img = "";
        var type = 0;
        var id = 0;

        //保存错题
        function addWrongItem() {
            if (storage.getItem("id") == undefined) {
                // alert("没有用户");
            } else {
                $.ajax({
                    url: "/addWrongItem",
                    type: "POST",
                    dataType: "json",
                    data: {
                        uid: localStorage.getItem("id"),
                        answer: answer, //答案
                        coments: coments,//试题内容
                        itemA: itemA,
                        itemB: itemB,
                        itemC: itemC,
                        itemD: itemD,
                        img: img,
                        type: type

                    },
                    success: function (res) {
                    }, error: function () {
                    }

                });
            }
        }

        //获取试题
        getItem();

        function getItem() {
            $.ajax({
                url: "forPractice",
                async: true,
                data: {
                    pageNum: pageNum
                },
                type: "POST",
                dataType: "json",
                success: function (res) {
                    id = res.id;
                    answer = res.answer;
                    coments = res.coments;
                    itemA = res.itemA;
                    itemB = res.itemB;
                    itemC = res.itemC;
                    itemD = res.itemD;
                    img = res.img;
                    type = res.type;
                    itemID = pageStart;
                    $(".itemNo").html(pageStart);
                    $(".itemComment").html(res.coments);
                    if (type == 0) {
                        $(".itemA").html("<input type='radio' name='item' value='对' />" + res.itemA);
                        $(".itemB").html("<input type='radio' name='item' value='错' />" + res.itemB);
                        $(".itemC").html("");
                        $(".itemD").html("");
                    } else {
                        $(".itemA").html("<input type='radio' name='item' value='A' />" + res.itemA);
                        $(".itemB").html("<input type='radio' name='item' value='C' />" + res.itemB);
                        $(".itemC").html("<input type='radio' name='item' value='C' />" + res.itemC);
                        $(".itemD").html("<input type='radio' name='item' value='D' />" + res.itemD);
                    }
                    $(".img").html(res.img);
                    // console.log(pageStart + "正确答案" + answer);
                }
            });
            pageNum = pageNum + 1;
            pageStart = pageStart + 1;
            return answer;
        }
        //登录
        $("#userLogin").on("click", function () {
            $.ajax({
                url: "/login",//url
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                data: {username: $("#username").val(), password: $("#password").val()},
                success: function (res) {
                    storage.setItem("username", res.username);
                    storage.setItem("id", res.id);
                    storage.setItem("type", res.type);
                    $.Pop('<h5>登录成功</h5>','alert',function(){window.location.reload()});
                },
                error: function () {
                    $.Pop('<h5>登录失败，请重新登录</h5>','alert',function(){window.location.reload()});
                }
            });
        });
        //注册
        $("#userRegister").on("click", function () {
            var myreg = /[^\s]/;
            var myreg2 = /\w{5,17}$/;
            //名称不能为空
            if (!myreg.test($("#rusername").val())) {
                $.Pro('用户名不能为空', {BoxBgopacity: 1});
                $("#rusername").focus();
                return false;
            }

            if (!myreg2.test($("#rpassword").val())) {
                $.Pro('请输入6~18密码', {BoxBgopacity: 1});
                $("#rpassword").focus();
                return false;
            }
            if(!myreg.test($("#YanZhengMa").val())){
                $.Pro('验证码不能为空', {BoxBgopacity: 1});
                return false;
            }
            else if( $("#yanzhengma-hidden").val()!= $("#YanZhengMa").val()){
                $.Pro('验证码错误', {BoxBgopacity: 1});
                return false;
            }
            else {
                $.ajax({
                    url: "/register",
                    type: "POST",
                    dataType: "json",
                    data: {username: $("#rusername").val(), password: $("#rpassword").val()},
                    success: function (res) {
                        storage.setItem("username", res.username);
                        storage.setItem("id", res.id);
                        storage.setItem("type", res.type);
                        $.Pop('<h5>注册成功</h5>', 'alert', function () {
                            window.location.reload()
                        });
                    }, error: function () {
                        $.Pop('<h5>注册失败,请重新注册</h5>', 'alert', function () {
                            window.location.reload()
                        });
                    }

                });
            }
        });
        //判断用户是否存在
        $("#rusername").on('keyup',function () {
            $("#iusername").html("");
        })
        $("#rusername").on('blur',function () {
            if($("#rusername").val()==""){

            }else{
                $.ajax({
                    url:'queryUserByUsername',
                    type:'post',
                    dataType:'json',
                    data:{username:$('#rusername').val()},
                    success:function (res) {
                        if(res!=0){
                            $("#iusername").html("<span style=\"color: red\">用户名已存在</span>");
                            $("#rusername").focus();
                        }else{
                            $("#iusername").html("<span style=\"color: green\">用户名可以使用</span>");
                        }
                    }
                })
            }

        })
        //enter提交登录、注册
        $(document).keypress(function(e) {
            // 回车键事件
            if(e.which == 13) {
                // jQuery(".confirmButton").click();
                if($("#username").val()!=''){
                    jQuery("#userLogin").click();
                }
                else if($("#rusername").val()!=''){
                    jQuery("#userRegister").click();
                }
            }
        });
        //退出登录
        $("#loginOut").on("click", function () {
            localStorage.removeItem("username");
            localStorage.removeItem("id");
            localStorage.removeItem("type");
            window.location.reload(); //刷新当前页面
        });
        //显示\隐藏题库
        itemdisplay();

        function itemdisplay() {
            if (storage.getItem("type") == 1) {
                $(".itemdisplay").fadeIn(2000);
            }
        }
        //登陆成功后隐藏登录注册按钮
        function displayuser() {
            a = $(".usernamedisplay").text();
            if (a != "") {
                /* $(".displaylogin").css('display', 'none');
                 $(".nowuser").css('display', 'block');*/
                $(".wrongItem").fadeIn(1000);
                $(".displaylogin").fadeOut(1000);
                $(".nowuser").fadeIn(2000);
            }
        }

        var storage = window.localStorage;
        //从localstorage获得用户信息
        $(".usernamedisplay").text(storage.getItem("username"));
        //刷新当前用户
        setInterval(function () {
            displayuser();
        }, 1000);
    })
    //获取验证码

    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    $("#GetYanZhengMa").on("click",function () {
        //校验邮箱
        var email = $("#remail").val();
        if(!email.match(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)){
            // alert("邮箱格式不正确！请重新输入");
            $.Pro('邮箱格式不正确！请重新输入', {BoxBgopacity: 1});
            // return false;
        }else{
            // 设置button效果，开始计时
            curCount = count;
            document.getElementById("GetYanZhengMa").setAttribute("disabled","true" );//设置按钮为禁用状态
            document.getElementById("GetYanZhengMa").value=curCount + "秒后重获";//更改按钮文字
            InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
            var Num="";
            for(var i=0;i<6;i++)
            {
                Num+=Math.floor(Math.random()*10);
            }
            $.ajax({
                url:'getEamil',
                type:'post',
                dataType:'json',
                data:{to:$('#remail').val(),subject:"邮箱验证",content:"您好 "+$('#remail').val()+"！" +
                        "\n" +
                        "欢迎注册BY一考通，请将验证码填写到注册页面。\n验证码为:"+Num},
                success:function (res) {
                    if(res==true){
                        $("#yanzhengma-hidden").val(Num);
                    }
                }
            })
        }
    });

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {//超时重新获取验证码
            window.clearInterval(InterValObj);// 停止计时器
            document.getElementById("GetYanZhengMa").removeAttribute("disabled");//移除禁用状态改为可用
            document.getElementById("GetYanZhengMa").value="重获验证码";
        }else {
            curCount--;
            document.getElementById("GetYanZhengMa").value=curCount + "秒后重获";
        }
    }
</script>
</html>